<template>
	<section>
		<el-col :span="24" class="box">
			<el-col :span="24" class="box-header">办理事项</el-col>
			<el-form ref="detailForm" :model="detailForm" label-width="130px">
				<el-form-item label="父级目录">
					<el-col :span="5">
						<el-select v-model="detailForm.ParentID" placeholder="无" :disabled="svgDeptId" @change="">
							<el-option v-for="item in rootitems" :key="item.ID" :label="item.Title" :value="item.ID"></el-option>
						</el-select>
					</el-col>
					<el-col :span="3" class="label-txt">标题</el-col>
					<el-col :span="5">
						<el-input v-model="detailForm.Title"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="办理科室">
					<el-col :span="5">
						<el-input v-model="detailForm.Office"></el-input>
					</el-col>
					<el-col :span="3" class="label-txt">楼层</el-col>
					<el-col :span="5">
						<el-select v-model="detailForm.Floor" placeholder="请选择" @change="">
							<el-option v-for="item in building" :key="item" :label="item" :value="item"></el-option>
						</el-select>
					</el-col>
					<el-col :span="3" class="label-txt">房间号</el-col>
					<el-col :span="5">
						<el-input v-model="detailForm.RoomNo"></el-input>
					</el-col>
				</el-form-item>

				<el-form-item label="市电">
					<el-col :span="5">
						<el-input v-model="detailForm.Phone2"></el-input>
					</el-col>
					<el-col :span="3" class="label-txt">路电</el-col>
					<el-col :span="5">
						<el-input v-model="detailForm.Phone1"></el-input>
					</el-col>
				</el-form-item>

				<el-form-item label="位置图示">
					<el-col :span="5">
						<el-upload class="avatar-uploader" action="/api/doc/guide" :show-file-list="false" :on-success="fnLocationSuccess">
							<img v-if="imageUrl.location" :src="imageUrl.location" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<el-button type="text" size="mini" style="margin:0 38%;" @click.native="fnShowLocation">查看原图</el-button>
					</el-col>
					<el-col :span="3" class="label-txt">图标</el-col>
					<el-col :span="5">
						<el-upload class="avatar-uploader" action="/api/doc/guide" :show-file-list="false" :on-success="fnIconSuccess">
							<img v-if="imageUrl.icon" :src="imageUrl.icon" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<el-button type="text" size="mini" style="margin:0 38%;" @click.native="fnShowIcon">查看原图</el-button>
					</el-col>
					<el-col :span="3" class="label-txt">办理流程文档</el-col>
					<el-col :span="5">
						<el-upload class="avatar-uploader" action="/api/doc/guide" show-file-list="false" :on-success="fnGuideDocSuccess">
							<img v-if="imageUrl.guideDoc" :src="imageUrl.guideDoc" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<el-button type="text" size="mini" style="margin:0 38%;" @click.native="fnShowGuideDoc">查看原图</el-button>
					</el-col>
				</el-form-item>
				
				<el-form-item label="温馨提示">
					<el-col :span="22">
						<div class="edit_container">
							<editor v-model="detailForm.Remark"></editor>
			            </div>
					</el-col>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click.native="fnAddSvgDept">保存</el-button>
					<el-button @click="emitGoBack">返回</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--查看原图界面-->
		<el-dialog title="查看原图" v-model="showFormVisible" :close-on-click-modal="false">
			<img :src="show" class="show-img"/>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="showFormVisible = false">取消</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import Svc from '../../service/index.js'
	import editor from '../quillEditor/Quilleditor.vue'
	import moment from 'moment'
	export default {
		props:['svg-dept-id'],
		data() {
				return {
					rootitems: [], //所有父级
					building : [], //所有楼层
					imageUrl: { //所有图片路径（展示用）
						location: '',
						icon: '',
						guideDoc: ''
					},
					detailForm: {
						ID: 0, // 主键，修改时必传
						ParentID: '', //父级目录ID
						Title: '', //标题
						Office: '', //办理科室
						Floor: '', //楼层
						RoomNo: '', //房间号
						Phone1: '', //路电
						Phone2: '', //市电
						GuideDoc: '', //办理流程文档指南
						LocationImg: '', // 位置图示
						Icon: '', // 图标
						Remark : '' // 说明
					},
					showFormVisible : false, //查看原图
					show : ''
				}
			},
			components: {
			    editor
			},
			methods: {
				//自定义事件->返回
				emitGoBack() {
					this.$emit('go-back', 'list')
				},
				//显示message提示框
				openMessage: function(msg, type) {
					this.$message({
						showClose: true,
						message: msg,
						type: type
					});
				},
				//获取所有父级事项
				fnGetRootitems() {
		      		var that = this
		            Svc.fnGetData('/api/guide/rootitems',{},function(res){
		            	if (res.body.ErrCode == 0){
		            		if (res.body.Data) {
		            			that.rootitems = res.body.Data
		            		}
		            	} else {
		            		that.openMessage("父级目录获取失败！" + res.body.ErrMsg,'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
				},
				//获取所有楼层
				fnGetBuilding(){
					var that = this
		            Svc.fnGetData('/api/setting/building',{},function(res){
		            	if (res.body.ErrCode == 0){
		            		if (res.body.Data) {
		            			that.building = res.body.Data
		            		}
		            	} else {
		            		that.openMessage("楼层获取失败！" + res.body.ErrMsg,'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
				},
				//添加位置图示成功
				fnLocationSuccess(res, file) {
					this.imageUrl.location = URL.createObjectURL(file.raw);
					this.detailForm.LocationImg = res.Data.Key
				},
				//添加图标成功
				fnIconSuccess(res, file) {
					this.imageUrl.icon = URL.createObjectURL(file.raw);
					this.detailForm.Icon = res.Data.Key
				},
				//添加办理流程文档指南成功
				fnGuideDocSuccess(res, file) {
					this.imageUrl.guideDoc = URL.createObjectURL(file.raw);
					this.detailForm.GuideDoc = res.Data.Key
				},
				//获取当前办事事项
				fnGetSvgDept(){
					var that = this
		            Svc.fnGetData('/api/guide/detail/'+that.svgDeptId,{},function(res){
		            	if (res.body.ErrCode == 0){
		            		if (res.body.Data) {
		            			that.imageUrl.location = res.body.Data.LocationImg
		            			that.imageUrl.icon = res.body.Data.Icon
		            			that.imageUrl.guideDoc = res.body.Data.GuideDoc
		            			that.detailForm = res.body.Data
		            			if (res.body.Data.ParentID == 0) {
		            				that.detailForm.ParentID = "无父级"
		            			}
		            			
		            			//不更新时传空
		            			that.detailForm.LocationImg = ""
		            			that.detailForm.Icon = ""
		            			that.detailForm.GuideDoc = ""
		            		}
		            	} else {
		            		that.openMessage("当前办事事项获取失败！" + res.body.ErrMsg,'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
				},
			    //新增
			    fnAddSvgDept(){
			    	var that = this
			    	that.detailForm.ID = parseInt(that.svgDeptId)
			    	that.detailForm.ParentID = parseInt(that.detailForm.ParentID)
		            Svc.fnPostData('/api/guide/save',that.detailForm,function(res){
		            	if (res.body.ErrCode == 0){
		            		that.openMessage("操作成功！",'success')
		            		setTimeout(function () {
		            			that.emitGoBack()
				          	},1000);
		            	} else {
		            		that.openMessage("新增/更新办事部门信息失败！" + res.body.ErrMsg,'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
			    },
			    //查看原图
			    fnShowLocation(){
			    	this.showFormVisible = true
			    	this.show = this.imageUrl.location
			    },
			    fnShowIcon(){
			    	this.showFormVisible = true
			    	this.show = this.imageUrl.icon
			    },
			    fnShowGuideDoc(){
			    	this.showFormVisible = true
			    	this.show = this.imageUrl.guideDoc
			    }
			},
			mounted() {
				//获取所有父级事项
				this.fnGetRootitems()
				//获取所有楼层
				this.fnGetBuilding()
				//获取当前办事事项
				if (this.svgDeptId) {
					this.fnGetSvgDept()
				}
			}
	}
</script>

<style scoped>
	.box {
		background-color: #fff;
		box-sizing: border-box;
		background: #fff;
		border: 1px solid #d1dbe5;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
		margin-top: 20px;
	}
	
	.box-header {
		background-color: #eef1f6;
		border-bottom: 1px solid #d1dbe5;
		padding: 10px;
		margin-bottom: 24px;
		font-size: 15px;
		color: #48576a;
	}
	
	.label-txt {
		text-align: right;
		margin-right: 10px;
	}
	
	.avatar-uploader {
		width: 197px;
		height: 150px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 197px;
		height: 150px;
		line-height: 150px;
		text-align: center;
	}
	
	.avatar {
		width: 197px;
		height: 150px;
		display: block;
	}
	
	.show-img{
		width: 100%;
		height: 100%;
	}
	
	/*设置富文本编辑器高度*/
	.edit_container{
		height: 260px;
	}
</style>